$(document).ready(function () {
  window.addEventListener("resize", () => {
    location.reload();
  });
  var pointIndex = 0;
  // vue
  let vm = new Vue({
    el: '#app',
    data: {
      userArray:[ 
        //工人位上
        { x: 10, y: 0,numIndex:1 },{ x: 130, y: 0,numIndex:2 },{ x: 250, y: 0,numIndex:3 },{ x: 370, y: 0,numIndex:4 },{ x: 490, y: 0,numIndex:5 },
        { x: 610, y: 0,numIndex:6 },{ x: 730, y: 0,numIndex:7 },
        { x: 850, y: 0,numIndex:8 },{ x: 970, y: 0,numIndex:9 },{ x: 1090, y: 0,numIndex:10 },{ x: 1210, y: 0,numIndex:11 },{ x: 1330, y: 0,numIndex:12 },
        { x: 1450, y: 0,numIndex:13 },
        // 工人位下
        { x: 10, y: 400,numIndex:26 },{ x: 130, y: 400,numIndex:25 },{ x: 250, y: 400,numIndex:24 },{ x: 370, y: 400,numIndex:23 },{ x: 490, y: 400,numIndex:22 },
        { x: 610, y: 400,numIndex:21 },{ x: 730, y: 400,numIndex:20 },
        { x: 850, y: 400,numIndex:19 },{ x: 970, y: 400,numIndex:18 },{ x: 1090, y: 400,numIndex:17 },{ x: 1210, y: 400,numIndex:16 },{ x: 1330, y: 400,numIndex:15 },
        { x: 1450, y: 400,numIndex:14 },
      ],
      pointArray: [
        //轨道点
        { x: 34, y: 160,numIndex:1 },{ x: 154, y: 160,numIndex:2 },{ x: 274, y: 160,numIndex:3 },{ x: 394, y: 160,numIndex:4 },{ x: 514, y: 160,numIndex:5 },
        { x: 634, y: 160,numIndex:6 },{ x: 754, y: 160,numIndex:7 },
        { x: 874, y: 160,numIndex:8 },{ x: 994, y: 160,numIndex:9 },{ x: 1114, y: 160,numIndex:10 },{ x: 1234, y: 160,numIndex:11 },{ x: 1354, y: 160,numIndex:12 },
        { x: 1474, y:160,numIndex:13 },
        //轨道点
        { x: 34, y: 340,numIndex:26 },{ x: 154, y: 340,numIndex:25 },{ x: 274, y: 340,numIndex:24 },{ x: 394, y: 340,numIndex:23 },{ x: 514, y: 340,numIndex:22 },
        { x: 634, y: 340,numIndex:21 },{ x: 754, y: 340,numIndex:20 },
        { x: 874, y: 340,numIndex:19 },{ x: 994, y: 340,numIndex:18 },{ x: 1114, y: 340,numIndex:17 },{ x: 1234, y: 340,numIndex:16 },{ x: 1354, y: 340,numIndex:15 },
        { x: 1474, y: 340,numIndex:14 },
      ],
      pointRouteArray:[
        { x: 10, y: 0 },{ x: 34, y: 160 },
        // { x: 110, y: 150 },{ x: 110, y: 0 },{ x: 110, y: 150 },
        // { x: 260, y: 150 },{ x: 260, y: 0 },{ x: 260, y: 150 },
        // { x: 310, y: 150 },{ x: 310, y: 0 },{ x: 310, y: 150 },
        // { x: 510, y: 150 },{ x: 510, y: 0 },{ x: 510, y: 150 },
        // { x: 610, y: 150 },
        // { x: 610, y: 300 },
        // { x: 460, y: 300 },{ x: 460, y: 350 },{ x: 460, y: 300 },
        // // { x: 310, y: 300 },
        // { x: 260, y: 300 },{ x: 260, y: 350 },{ x: 260, y: 300 },
        // { x: 60, y: 300 },{ x: 60, y: 350 },{ x: 60, y: 300 },
        // { x: 10, y: 300 }
    ],
      _interval:10,
      int: 0,
      thisPointIndex: 0,
      thisEndX: 34,
      thisEndY: 115,
      imgOffset: 6
    },
    created() {
      
    },
    mounted() {
      this.toMove()
    },
    methods: {
      toMove(){
        this.int = setInterval(this.moveImgToPoint,this._interval)
      },
      moveImgToPoint(){
        console.log(111)
        var ele = document.getElementById('needmoveimg');
        var x = Number(ele.style.left.replace('px', ''));
        var y = Number(ele.style.top.replace('px', ''));
        //到达目标点
        if(x == this.thisEndX && y == this.thisEndY){
            this.changeEndPoint();
        }
        var nextX = this.thisEndX > x ? x + 1 : (this.thisEndX < x ? x - 1 : x);
        var nextY = this.thisEndY > y ? y + 1 : (this.thisEndY < y ? y - 1 : y);
        ele.style.left = nextX + 'px';
        ele.style.top = nextY + 'px';
        
        this.CreatePoint(nextX, nextY, '');
        // setTimeout(moveImg, _interval);
      },
      changeEndPoint(){
        if(this.thisPointIndex > this.pointRouteArray.length - 1){
            this.int = window.clearInterval(this.int);
        }

        var endPoint = this.pointRouteArray[this.thisPointIndex];
        // console.log(endPoint);
        var startPoint = this.thisPointIndex > 0 ? this.pointRouteArray[this.thisPointIndex - 1] : this.pointRouteArray[0];
        console.log(startPoint)
        var beginX = startPoint.x - this.imgOffset;
        var beginY = startPoint.y - this.imgOffset;
        var endX = endPoint.x - this.imgOffset;
        var endY = endPoint.y - this.imgOffset;
        // var ele = document.getElementById('needmoveimg');
        // ele.style.left = beginX + 'px';
        // ele.style.top = beginY + 'px';
        this.thisEndX = endX;
        this.thisEndY = endY;

        //if(this.thisPointIndex == this.pointRouteArray.length - 1){
        //     // int=window.clearInterval(int);
        //     this.thisPointIndex = 0;
        // }
        // else{
            this.thisPointIndex++;
        // }
        this.moveImgToPoint();
    },
    
      CreatePoint(x,y,color) {
        pointIndex++;
        if(pointIndex % 4 != 0){ return; };
        var ele = document.getElementById('showLine');
        var newEle = "<div name='lineNumber_' border='0px solid red;' style='position: absolute; left: "+ (x + this.imgOffset) + "px; top: " + (y + this.imgOffset) + "px;" 
            + "background-color: "+'red'+";width:4px;height:4px;' ></div>";
        ele.innerHTML += newEle;
        console.log(ele)
      }
    },
    computed:{
      //动态设置样式
      setIconStyle() {
      return function (item) {
        console.log(item)
        return {
          'left': item.x+'px',
          'top': item.y+'px'
        }
        }
      }
    },
    destroyed() {

    },
  })
});